import React from 'react'
import { Grid, List } from 'antd-mobile'
import styles from './index.module.scss'

const avatars = ['man','female','doctor','chef','alien',
    'cat','crab','dog','honey','monster',
    'eagle','lion','hellhog']

const data = avatars.map( item => ({
    icon: require(`@/assets/images/avatar/${item}.png`),
    text: `${item}`,
}))

class AvatarSelector extends React.Component {
    state = {
        icon: ''
    }
    render(){
        const { icon } = this.state
        const { getAvatar } = this.props
        let header = icon ? (
                    <div>已选头像：<img src={icon} alt="avatar" className={styles.avatar}></img></div>
                ) : (
                    <div>选择头像：</div>
                )
        return (
            <List renderHeader={() => header}>
                <Grid
                    data={data}
                    columnNum={5}
                    onClick={ el => {
                        getAvatar(el.text)
                        this.setState({ icon: el.icon })
                    } }
                />
            </List>
        )
    }
}

export default AvatarSelector